<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox color="#FF6040" value="true" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>

		<view class="container">
			<view class="top">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in cartList"
					:key="index">
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<u-checkbox-group @change="changeEach">
									<u-checkbox color="#FF6040" v-model="item.checked" />
								</u-checkbox-group>

								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode="widthFix"></image>
							</view>

							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price*item.num}}
									</text> <text>￥{{item.price}}</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="update(index,1)">－</label>
									<label>{{item.num}}</label>
									<label @click="update(index,2)">＋</label>
								</view>
							</view>
						</view>

					</view>
					<view class="cartDel" id="demo2" @click="del(item.id)">
						<label for="">删除</label>
					</view>
				</scroll-view>
			</view>

			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<u-checkbox-group @change="changeAll">
						<u-checkbox color="#FF6040" v-model="checkedAll" />
					</u-checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{totalPrice}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity" @click="toOrder">
					<!-- 被选中的商品的个数 -->
					<label>去结算({{totalNum}}件)</label>
				</view>
			</view>

		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
</template>

<script>
	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	import checkToken from '../../utils/checkToken';
	export default {
		components: {
			cartnull
		},
		data() {
			return {
				cartList: [], //初始化购物车数据
				buffer: false, //检测购物车是否有数据
				checkedAll: false, // 全选
			}
		},
		// 页面显示时
		onShow() {
			let isLogin = checkToken(this);
			if (!isLogin) {
				this.buffer = false;
				uni.showToast({
					title: '请先登录',
					icon: 'error',
				})
				uni.navigateTo({
					url: '/pages/login/login',
				})
				return;
			}

			this.userInfo = uni.getStorageSync('userInfo');

			// 发起购物车请求
			this.requestCart();
		},
		computed: {
			// 合计
			totalPrice() {
				let sum = 0;
				this.cartList.forEach(item => {
					if (item.checked) {
						sum += item.price * item.num;
					}
				})
				return sum.toFixed(2);
			},

			// 去结算
			totalNum() {
				let num = 0;
				this.cartList.forEach(item => {
					if (item.checked) {
						num += item.num;
					}
				})
				return num
			}
		},
		methods: {
			// 去到订单页面
			toOrder() {
				if (this.totalNum <= 0) {
					uni.showToast({
						title: "暂无商品",
						icon: "error",
					});
					return
				}
				let carts = this.cartList.filter(item => {
					if (item.checked) {
						return item;
					}
				});
				uni.setStorage({
					key: 'cartInfo',
					data: {
						cartInfo: carts,
						totalPrice: this.totalPrice,
						totalNum: this.totalNum,
					},
					success: () => {
						uni.navigateTo({
							url: '/pages/order/order',
						})
					}
				})
				this.checkedAll = false;

			},
			// 购物车删除
			del(id) {
				uni.showModal({
					title: '提示',
					content: "确定要删除吗?",
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							let data = {
								id,
							}
							// 发起删除请求
							this.$http({
								url: '/api/cartdelete',
								method: 'post',
								data,
								header: {
									authorization: this.userInfo.token,
								},
							}).then(res => {
								if (res.data.code === 200) {
									uni.showToast({
										title: res.data.msg
									});
									// 更新购物车列表
									this.requestCart();
								}
							})
						}
					}
				})
			},
			// 更新视图
			update(index, type) {
				// 做临界点判断
				if (this.cartList[index].num <= 1 && type === 1) {
					uni.showToast({
						title: '剩最后一个了',
					})
					return;
				}

				// 发起商品添加减少请求
				const data = {
					id: this.cartList[index].id,
					type,
				}

				this.$http({
					url: '/api/cartedit',
					method: 'post',
					data,
					header: {
						authorization: this.userInfo.token
					},
				}).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: res.data.msg,
						});
						// 请求购物车列表
						this.requestCart();
					}
				});
			},


			// 当全选选中时，让每一个复选框都选中
			// 当有一个复选框没选中时，全选不选中
			changeAll() {
				this.cartList.forEach(item => {
					item.checked = this.checkedAll
				})
			},

			// 当所有复选框选中时，全选选中
			// 当有一个复选框没选中时，全选不选中
			changeEach() {
				let result = this.cartList.every(item => item.checked);
				this.checkedAll = result;
			},

			// 发起购物车请求
			requestCart() {

				let data = {
					uid: this.userInfo.uid,
				}
				this.$http({
					url: '/api/cartlist',
					data,
					header: {
						authorization: this.userInfo.token
					},
				}).then(res => {
					if (res.data.code === 200 && res.data.list !== null) {
						this.buffer = true
						res.data.list.forEach(item => {
							item.img = this.$pregImg + item.img;
							item.checked = false;
						});
						this.cartList = res.data.list;
					} else {
						this.buffer = false;
					}
				})
			},

		}
	}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>